<template>
<!-- template是写结构的地方，布置浏览器初始的界面-->
<!--左右分区-->
<el-row type="flex" justify="space-between" class="container">
  <!-- left-region -->
  <div class="main">
    <div class="breadcrumb">
        <el-row type="flex" >
            <span><nuxt-link to="/post"> <em>旅游攻略</em></nuxt-link></span>
            <span>&nbsp;/ 旅游详情</span>
        </el-row>
    </div>

    <div>
        <div >
          <h1> {{ showdetail_data.title}}</h1>
        </div>
    </div>

    <div>
      <span>攻略：{{a.created_at}}</span>
      <span>阅读：{{showdetail_data.watch}}</span>
    </div>

    <!-- 文章内容 -->
    <div class="post-content" v-html="showdetail_data.content"></div>

    <div>
      <el-row type="flex" justify="center">
       <div class="ctrl-item">
         <i class="iconfont iconpinglun"></i>
         <p>评论({{commentsTotal}})</p>
       </div>

       <div class="ctrl-item" @click="$message.warning('暂不支持分享')">
         <i class="iconfont iconfenxiang"></i>
         <p>分享</p>
       </div>
      </el-row>

      <div class="cmt-wrapper">
        <h4 class="cmt-title">评论</h4>
        <div>
          回复@{{reply.nickname}}
        </div>
        <el-input v-model="comment" placeholder="说些什么吧"></el-input>
        <br/>
      </div>
      
      <el-row type="flex" justify="space-between">
          <div>
            图片分享区
          </div>
          <div>
            <el-button type="primary">提交</el-button>
          </div>
      </el-row>

      <!-- 评论区 -->
      <div class="cmt-list" v-if="commentsTotal">
                    <div class="cmt-item" 
                    v-for="(item, index) in comments" 
                    :key="index">
                        <div class="cmt-info">
                            <img :src="$axios.defaults.baseURL + item.account.defaultAvatar">
                            {{item.account.nickname}} 
                            <i>{{item.created_at | timestamp}}</i>
                            <span>{{item.level}}</span>
                        </div>
                        <div class="cmt-content">

                            <!-- 评论楼层 -->
                            <CommentFloor 
                            v-if="item.parent" 
                            :comment="item.parent" 
                            @preview="handlePictureCardPreview"
                            @reply="handleReply"/>

                            <div class="cmt-new">
                                <p class="cmt-message">
                                    {{item.content}}
                                </p>
                                <el-row type="flex">
                                    <div class="cmt-pic" v-for="(pic, picIndex) in item.pics" :key="picIndex">
                                        <img :src="$axios.defaults.baseURL + pic.url" @click="handlePictureCardPreview(pic)">
                                    </div>
                                </el-row>
                                <div class="cmt-ctrl">
                                    <a href="javascript:;" >回复</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

      <!-- 无评论 -->
      <div class="cmt-empty" v-if="!commentsTotal">
             暂无评论
      </div>   
                <!-- 分页 -->
     <el-row type="flex" 
            justify="center" 
            v-if="commentsTotal"
            style="margin-top:10px;">
            <el-pagination
                 @size-change="handleSizeChange"
                 @current-change="handleCurrentChange"
                :current-page="Math.floor(start / limit) + 1"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="limit"
                layout="total, sizes, prev, pager, next, jumper"
                :total="commentsTotal">
        </el-pagination>
     </el-row>

    </div>
  </div>

  <!-- right -->
    <div class="aside">
            <!-- 推荐文章 -->
            <h4 class="aside-title">相关攻略</h4>
            <div class="recommend-list">
                <nuxt-link :to="`/post/detail?id=${item.id}`"
                @click.native="refresh"
                class="recommend-item" 
                v-for="(item, index) in recommends"
                :key="index">
                    <el-row type="flex" class="post-imgText">
                        <el-row type="flex" align="middle" class="post-img" v-if="item.images[0]">
                            <img :src="item.images[0]" alt="">
                        </el-row>
                        <div class="post-text">
                            <div>
                                {{item.title}}
                            </div>
                            <p>{{item.created_at | timestamp}} 阅读 {{item.watch}}</p>
                        </div>
                    </el-row>
                </nuxt-link>
            </div>
    </div>
</el-row>
</template>

<script>
//script 是写js的地方，实现操作功能的逻辑代码区

export default {
  mounted(){
    //获取传递过来的iD
    this.showid=this.$route.query.id
    
    this.$axios({
            url:'/posts',
            methods:'get'
        }).then(res=>{
            console.log(222,res)
            this.showdetail=res.data.data
            console.log("这是showdetail",this.showdetail)
            this.showdetail_data=this.showdetail.filter(v=>{
                return v.id==this.showid
            })[0]
             console.log("这是具体的文章",this.showdetail_data)
            this.commentsTotal=this.showdetail_data.comments.length//获取评论数组的长度
            this.a=this.showdetail_data.city
            this.commentShow=this.showdetail_data.comments
            console.log(789,this.showdetail_data.comments)
            console.log(123,this.commentShow)
        })
    this.$axios({
        url:'/posts/recommend',
        methods:'get'
    }).then(res=>{
        this.recommends=res.data.data
        console.log(333,this.recommends)
    })
  },
  data(){
    return{
      dialogImageUrl: '',
      dialogVisible: false,

      showdetail:{},
      showid:"",
      showdetail_data:{},
      commentsTotal:0,
      a:{},

      comment:"",
      recommends:{},
      comments:[],

    // comment form
    cmtForm: {
         content: "",
        pics: []
    },

      start: 0,
      limit: 5,
      reply: {},

      recommends: [],
    }
  },
  methods:{
    refresh(){
        console.log("进来了吗？")
            //获取传递过来的iD
    this.showid=this.$route.query.id
    
    this.$axios({
            url:'/posts',
            methods:'get'
        }).then(res=>{
            console.log(222,res)
            this.showdetail=res.data.data
            console.log("这是showdetail",this.showdetail)
            this.showdetail_data=this.showdetail.filter(v=>{
                return v.id==this.showid
            })[0]
             console.log("这是具体的文章",this.showdetail_data)
            this.commentsTotal=this.showdetail_data.comments.length//获取评论数组的长度
            this.a=showdetail_data.city
        })
    this.$axios({
        url:'/posts/recommend',
        methods:'get'
    }).then(res=>{
        this.recommends=res.data.data
        console.log(333,this.recommends)
    })
    },
    getComments(){
            this.$axios({
                url: "/posts/comments",
                params: {
                    post: this.$route.query.id,
                    _start: this.start,
                    _limit: this.limit
                }
            }).then(res => {
                const {data} = res.data;
                this.comments = data;
                this.commentsTotal =total;
            })
        },
    handlePictureCardPreview(file) {
            console.log(file)
            if(file.response){
                file = file.response[0]
            }
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        handleReply(comment){
            this.reply = comment.account;
            this.cmtForm.follow = comment.id;
            window.scrollTo(0, this.$refs.cmtInput.offsetTop);
        },

        handleCloseReply(){
            this.reply = {};
            this.cmtForm.follow = ""
        },
        handleSizeChange(value){
            this.limit = value;
            this.start = 0;
            this.getComments();
        },

        handleCurrentChange(value){
            this.start = this.limit * (value - 1);
            this.getComments();
        },
  }
}

</script>

<style scoped lang="less">
    .container{
        width:1000px;
        margin:0 auto;
        padding-top:20px;
    }

    .main{
        width: 700px;

        h1{
            padding:20px 0;
            border-bottom:1px #ddd solid;
        }

        .post-content{
            line-height: 1.5;

            /deep/ *{
                max-width: 700px!important;
            }

            /deep/ img{
                margin:10px 0;
            }
        }

        .post-info{
            color:#999;
            padding:20px;
            text-align:right;

            span{
                margin-left:20px;
            }
        }

        .post-ctrl{
            padding: 50px 0 30px;
            .ctrl-item{
                margin:0 20px;
                font-size:20px;
                text-align:center;
                cursor: pointer;
                
                i{
                    display:block;
                    font-size: 28px;
                    color:orange;
                    
                   
                }

                &:nth-child(2){
                    i{
                        transform: scale(1.4);

                    }              
                }
                p{
                    margin-top:5px;
                    font-size: 14px;
                    color:#999;
                }
            }
        }

        /* 评论 */
        .cmt-wrapper{
            margin-bottom:20px;
        }

        .replyTag{
            margin-bottom:10px;
        }

        .cmt-title{
            font-weight: normal;
            font-size: 18px;
            margin-bottom: 20px;
        }

        .cmt-input{
            margin-bottom:10px;
        }

        .cmt-input-ctrls{
            margin-bottom:30px;
            /deep/ .el-upload--picture-card{
                width:100px;
                height:100px;
                line-height: 100px;
            }

            /deep/ .el-upload-list {
                li {
                    width:100px;
                    height:100px;
                }

                img{
                    object-fit: cover;
                }
            }
        }

        .cmt-empty{
            color:#999;
            font-size: 14px;
            text-align: center;
            padding:30px 0;
            border:1px #ddd dashed;
        }

        .cmt-list{
            border: 1px #ddd solid;
        }

        .cmt-item{
            border-bottom: 1px #ddd dashed;
            padding: 20px 20px 5px;

            &:last-child{
                border-bottom: none;
            }

            .cmt-content{
                padding:0 0 0 30px;
            }

            .cmt-info{
                margin-bottom:10px;
                font-size:12px;
                color:#666;

                *{
                    vertical-align: top;
                }

                img{
                    width:16px;
                    height:16px;
                    border-radius:50%;
                }

                i{
                    color:#999;
                }
                span{
                    float: right;
                }
            }
            .cmt-message{
                margin-top:10px;
            }

            .cmt-pic{
                width:80px;
                height:80px;
                border-radius: 6px;
                overflow: hidden;
                margin-right:5px;
                margin-top:10px;
                padding:5px;
                border:1px #ddd dashed;

                img{
                    display:block;
                    width:100%;
                    height:100%;
                    object-fit: cover;
                    cursor: pointer;
                }
            }

            /*  这里和comment floor不一样，鼠标在最新内容上才hover */
            .cmt-new:hover{
               .cmt-ctrl{
                    * { display:inline };
                }
            }

            .cmt-ctrl{
                height:20px;
                line-height: 20px;
                font-size:12px;
                color:#1e50a2;
                text-align:right;

                *{
                    display:none;
                }

                a:hover{
                    text-decoration: underline;
                }
            }
        }
    }

    /* 侧边栏 */
    .aside{
        width:280px;

        .aside-title{
            font-weight: normal;
            font-size:18px;
            padding-bottom: 10px;
            border-bottom: 1px #ddd solid;
        }

        .recommend-item{
            display: block;
            padding: 20px 0;
            border-bottom: 1px #ddd solid;

            .post-imgText{
                height:80px;
                
                .post-img{
                    width:100px;
                    height:80px;
                    flex-shrink: 0;
                    background:#ddd;
                    overflow: hidden;
                    margin-right:10px;
                    img{
                        width:100%;
                        height:100%;
                        object-fit: cover;

                    }
                }

                .post-text{
                    flex: 1;
                    position: relative;
                    div{
                        position:relative;
                        line-height:1.4em;
                        /*设置容器高度为3倍行高就是显示3行*/
                        height:2.8em;
                        overflow:hidden;
                        position:absolute;
                        left:0;
                        top:0;
                        width:100%;
                    }

                    p{
                        position: absolute;
                        bottom:0;
                        left:0;
                        font-size:12px;
                        color:#999;
                    }
                }
            }

            
        }
    }
</style>

